<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索框</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #e94118;
        }

        body::before {
            content: "By Ghost.";
            position: absolute;
            bottom: 10px;
            right: 10px;

        }
        .search-box {
            position: absolute;
            background-color: #2f3640;
            height: 40px;
            border-radius: 40px;
            padding: 10px;
            padding: 10px;
        }

        .search-box:hover>.search-txt {
            width: 200px;
            padding: 0px 6px;
        }

        .search-box input:valid,
        .search-box input:focus {
            width: 200px;
            padding: 0px 6px;
        }

        .search-box:hover>.search-btn {
            background-color: white;
        }

        .search-btn {
            color: #e94118;
            float: right;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #2f3640;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: .4s;
        }

        .search-txt {
            border: none;
            background: none;
            outline: none;
            float: left;
            padding: 0;
            color: white;
            font-size: 16px;
            transition: .4s;
            line-height: 40px;
            width: 0;
        }
    </style>
</head>

<body>
    <div class="search-box">
        <input type="text" class="search-txt" placeholder="想搜索的内容" required>
        <a href="#" class="search-btn">
            <svg t="1612063168485" class="icon" viewBox="0 0 1027 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="2432" width="24" height="24">
                <path
                    d="M1000.45977 882.758621l-247.172414-247.172414c0 0-5.885057-5.885057-11.770115-5.885057 41.195402-64.735632 64.735632-141.241379 64.735632-223.632184 0-223.632184-182.436782-406.068966-406.068966-406.068966C182.436782 0 0 182.436782 0 406.068966c0 223.632184 182.436782 406.068966 406.068966 406.068966 82.390805 0 158.896552-23.54023 223.632184-64.735632 0 5.885057 5.885057 5.885057 5.885057 11.770115L882.758621 1000.45977c17.655172 17.655172 41.195402 23.54023 58.850575 23.54023 23.54023 0 41.195402-5.885057 58.850575-23.54023C1035.770115 965.149425 1035.770115 912.183908 1000.45977 882.758621M406.068966 682.666667c-153.011494 0-276.597701-123.586207-276.597701-276.597701 0-153.011494 123.586207-276.597701 276.597701-276.597701s276.597701 123.586207 276.597701 276.597701C682.666667 559.08046 559.08046 682.666667 406.068966 682.666667"
                    p-id="2433" fill="#e94118"></path>
            </svg>
        </a>
    </div>

</body>

</html>